<template>
  <div id="chart" style="width: 110px; height: 104px"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    num: Number,
  },
  data() {
    return {};
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      var chartDom = document.getElementById("chart");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        series: [
          {
            name: "Access From",
            type: "pie",
            selectedMode: "single",
            selectedOffset: 8,
            radius: "80%",
            emphasis:{
              disabled:true
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: this.num,
                selected: true,
                itemStyle: { color: "#FFCB2B" },
              },
              { value: 100, itemStyle: { color: "#2F5EFF" } },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style scoped></style>
